

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web大作业
    </title>
    <style>
      .head{
        height:10px;
       border-top:3px solid #ff8500;
      }
      body{
        
      }
      .logo{
      float:right;
      font :700 normal 40px Arial,Verdana,Sans-serif;
      list-style:none;
      padding: 2px 25px;
      text-decoration: none;
      color:black;
      }
      li .logo:hover{
        background-color:grey;
      }
      .dropdown{
        
      float:right;
      position: relative;
      font :700 normal 40px Arial,Verdana,Sans-serif;
      list-style:none;
      padding: 2px 25px;
      text-decoration: none;
      color:black;
      }
      .dropdown:hover{
        background-color:grey;
        display:block;
      }
      .dropdown-content {
        display: none;
        position: absolute;
        left: 0;
        background-color:rgb(120,120,120);
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 12px 16px;
        z-index: 1;
      }
      .dropdown:hover .dropdown-content {
  display: block;
      }
      .dropdown:hover
      {
        color:black;
        display:block;
      } 
      .dropdown-content {
     
      }
      .fuchouzhe{
        font-size:medium;
      }
      .fuchouzhe{
      list-style-type: none;
        text-decoration: none;
        list-style: none;
        color:white;
      position: relative;
          
    }
      .fuchouzhe:hover{
        color:black;
      }
      .pitcure{
        display:inline-block;
        float:left;
        width:50%;
      }
      a.ewq1{
        text-decoration: none;
        color:#ff8500;
        font-size:larger;
        position:relative;
        left: 800px;
        top:300px;
      }
      a.ewq1{
        width:500px;
          height:500px;
          background-color:rgb(120,120,120);
          border:2px solid black;
      }
      a.ewq1:hover{
        background-color: black;
      }
      #tabNav{
        float:left;
      }
      .content{
        text-align: center;
        overflow: hidden;
        width: 100%;
      
      }
          </style>
      <style>
           
      #tab{
        overflow: hidden;
          width: 100%;
        
          margin-top: 5px;
          border-radius: 10px;
           
      }
      #tabNav{
          width: 500px;
          height: 30px;
          margin: 10px 0 0 20px;
      }
      #tabNav p{
          float: left;
          margin-right: 10px;
          color: #e1e1e1;
      }
      #tabNav ul li{
          float: left;
          text-align: center;
          width: 100px;
          list-style: none;
          margin-right: 10px;
          cursor: pointer;
          color: black;
      } 
      .active{
          background-color: #939292;
          border-radius: 10px;
      }
      #main{
          clear: both;
      }
      .item{
          display: none;
          margin-left: 10px;
      }
      .show{
          display: block;
      } .zuixin-left {
          float: left;
          width: 290px;
          height: 550px;
          position: relative; 
          top: 10px;
          background-color: #939292;
          border-radius: 10px;
      }
      .zuixin-left img{
          width: 290px;
          border-radius: 10px;
      }
      .zuixin-left a{
          margin-left: 15px;
          font-size: 20px;
          color: #f1efef;
      }
      .zuixin-left a:hover{color: coral;}
      .zuixin-right a:hover{color: coral;}
      .zuixin-right a{color: #f1efef;}
      .zuixin-right{
          width: 330px;
          height: 230px;
          float: left;
          position: relative;
          top: 10px;
          left: 30px;
      }
      .zuixin-right img{
          width: 150px;
          border-radius: 10px;
      }
      .zuixin-right1{
          float: left;
          width: 150px;
      }
      .zuixin-right2{
          float: right;
          width: 150px;
      }
      .zuixin-right1,.zuixin-right2{
          display: inline-block;
      }
      #back{
        background-color: #323234;
      }
      .qita{
        width: 80px;
      }
      .tableft{
        display: inline-block;
    }
    

    .tableft{
        float: right;
        width: 280px;
        margin-top: 5px;
        background-color:#323234;
        border-radius: 10px;
    }
    .tableft-list{
        height: 45px;
        margin-left: 15px;
        position: relative;
        top: 10px;
        color: #e1e1e1;
    }
    .tableft-list a{
        color: #e1e1e1;
        margin-left: 5px;
    }
    .tableft-list a:hover{
        color: #FF7F50;
    }
    .tableft-list p{
        display:inline;
        color: #FF7F50;
    }
    </style>
    <style>
      .div1{
        margin:0 auto;
        float: right;
        background-color: white;

        width:50%;

        height:730px;

        border:2px solid white;

        border-radius:30px;

        text-align: center;

        line-height: 30px;
        clear:none;

      }
.newspaper{
  column-count:2;

  column-gap: 40px;
  column-rule-style: solid;
}
.movie{
  font-size:xx-large
}
    </style>
    <style>
      div.gallery {
  margin: 5px;
  border: 1px solid black;
  float: left;
  width: 24%;
}

div.gallery:hover {
  border: 1px solid #ff8500;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

    </style>
    <style>
      .tupian{
        margin:0 auto;
      }
    </style>
    <style>
  .footer {
        position: relative; 

        height: 150px;

        width: 100%;

        background-color:black;
        color: #A2A2A2;
       margin-bottom:0px;
        margin-top:340px;
      
    }
    .footer-liebiao{
        padding-top: 15px;
        height: 100px;
        width: 1000px;
    }
    .hello h4{
        color:#ff8500;
    }
    .footer-liebiao td{
        width: 100px;
    }
    .guanyu {
        float: left;
        width: 370px;
        height: 10px;
        margin: 0 0px 0 50px;
    }
    .xieyi {
        float: left;
        width: 370px;
        margin: 0 0px 0 150px;
    }
    .xuexibaogao {
        margin-top: 3px;
        font-family: '黑体';
      margin-right:3px;
      
        font-size: 14px;
        line-height: 21px;
        border:1px solid  white;
        margin:0 auto;
            width:600px;
            height:26px;
            background-color: white;
            text-align:center;
    }
.weibu{
  position:relative;
  float:right;
  clear:left;
  margin-right:10px;
 margin-bottom:0px;
  width:200px;
  height:150px;
}
.xuexibaogao:hover{
  background-color: white;
}
.zi{
  font-size:x-large;
  font-family:黑体;
}

    </style>
  </head>   
  <body background="https://img2.baidu.com/it/u=2751763189,3688578895&fm=253&fmt=auto&app=138&f=JPEG?w=901&h=500"
  style="background-repeat:norepeat;       
  background-size:100% 100%;
  background-attachment:fixed;">
    <header> 
      <div class="head">
      <ul >    <li class="logo"> <a class="logo"
         href="https://www.baidu.com/link?url=VcCZU1oqBYhO7Yo_n9POxbhY058yrexRiAJRdK7Yz4C7mtrCShbCmd77uui75PhB&wd=&eqid=f13666da000cf7cb0000000663b92fa7">
         相关游戏</a></li>
    <li class="dropdown"href="javascript:void(0)"><a href="" style="text-decoration:none; color:black" >其它
</a>      <div class="dropdown-content">
        <p class="fuchouzhe" >
          <a class="fuchouzhe"
           href="https://baike.baidu.com/item/%E5%A4%8D%E4%BB%87%E8%80%85%E8%81%94%E7%9B%9F/391050?fromModule=lemma_inlink"> 
            复仇者联盟
          </a>
        </p>
        <p class="fuchouzhe" >
          <a  class="fuchouzhe"
           href="https://baike.baidu.com/item/%E9%93%B6%E6%B2%B3%E6%8A%A4%E5%8D%AB%E9%98%9F/20275339?fromModule=lemma_inlink"> 
            银河护卫队
          </a>
        </p>
        <p class="fuchouzhe" >
          <a class="fuchouzhe" 
          href="https://baike.baidu.com/item/X%E6%88%98%E8%AD%A6/25050?fromModule=lemma_inlink"> 
            X战警
          </a>
        </p>
        <p class="fuchouzhe" >
        <a  href="qita.html" class="fuchouzhe" >
           其它
        </p>
      </div>
  </li>
    <li class="logo"> <a class="logo" href="https://haokan.baidu.com/v?pd=wisenatural&vid=7917626318828255399">经典语录</a></li>
    <li class="logo"> <a class="logo" href="marvel.html">有关漫威</a></li>
    <li class="logo"> <a class="logo" href="https://www.baidu.com/link?url=n8etIweOeL9qUEAe1_uag2S2ob_E0k8z9YG_bSiUL6vm5PsGcgpMNXH6VflvAMgy&wd=&eqid=ddef36400000fa950000000663b7fa84">首页 </a></li>
    </ul>
    </div>
    <div>
<img    class="pitcure"   src="444.webp"  height="700px" width="50%">
<img class="pitcure"  src="marvel.jpg" height="700px" width="50%">   
<nav >
  <span ><a class="ewq1"  href="https://www.baidu.com/link?url=DD4_Y4M8xKYdm6JwvO4Fn6clFXW3hdqCcXzG3MtpBLIr6maXmyQkZDdpaxHhFVe8b-cZywN93Np8bjXC7fh4jWQ9NpDhA1aiOJJiIeqfrE7&wd=&eqid=a7b90d5a0023bb510000000663b9330b">
    查看详情</a>
  </span>
</nav>
      </div>
</header>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<main>
  <div class="content">
            
    <div class="container">
 
      <div id="tab">
        <div id="tabNav">
          <p style="color:black">
            <strong><a href="javascript:void(0)" style="text-decoration:none;color:black">漫威十年宇宙</a></strong></p>
          <ul>
            <li class="active">第一阶段</li>
            <li>第二阶段</li>
            <li>第三阶段</li>
          </ul>
        </div>
        
          <div id="main">
          <div class="item show">
         
            <div class="main-zuixin">
            
              <div class="zuixin-left">
                <img src="Fuchouzhelianmeng1.webp" 
                width="50px" height="690px">
                                  <a href="https://www.baidu.com/link?url=IQ3O4mYtsux1dLOn2Nb4p6FZ2_ZDlsrbPuoqGWrPoxFl1m4MW8YqZpsGYPgdG1labb8LQ657_uY1k2K2De67Va&wd=&eqid=a819daf3000166220000000663bba73c" 
                                  target="_blank" 
                                  style="text-decoration: none; color:black" >
                                  《复仇者联盟》</a>
              </div>
              <div class="zuixin-right">
                <div class="zuixin-right1">
                  <div>
                    <img src="gangtiexia1.webp" height="330px" />
                    <a href="https://www.baidu.com/link?url=2f9MWrT5n5YF3-ccwtCTPlxpj_4CKSQ35WriD5Q-LZuU-J_a1u-dT_gmy_iIWTNWQYQ2dOxMBfVW_obbAQxtFMYe4E8QtF7kEA-B8U2aihe&wd=&eqid=f38d0b670002d97b0000000663bba9a9" target="_blank" 
                    style="text-decoration:none;color:black" 
                    
                    > 《钢铁侠1》</a>
                  </div>
                  <div>
                    <img src="meiguoduizhang1.webp" height="325px">
                    <a href="https://www.baidu.com/link?url=tAyd6llppbfuDhafwGDsYw5yDUsJMs0OHR43eBo27GeFO3Jatqoe2lnztrq-PLuJ&wd=&eqid=e65f29ff000270340000000663bba965" 
                    target="_blank" style="text-decoration:none ;color:black" >
                    《美国队长：复仇者先锋》</a>
                  </div>
                </div>
                <div class="zuixin-right2">
                  <div>
                    <img src="gangtiexia2.webp" height="330px">
                    <a href="https://www.baidu.com/link?url=6HkfFTxDDgHsp2EZ393E_rD4RF_NiIWqrlK_wrMsD2UxvZK7OY_wCgEV7FBFjJWA&wd=&eqid=b5dd53570003a2de0000000663bbae5c" target="_blank" 
                    style="text-decoration:none; color:black "> 《钢铁侠2》</a>
                  </div>
                  <div>
                    <img src="leishen1.jpg" height="330px">
                    <a href="https://www.baidu.com/link?url=Uyg4yPp_UVuBUt3PgIipMJM-Z3EnnKlFvF9Hroc-vFqmydPW5tx_TC72U0qCgxRdYosj8QHt54tJeWLCmjErVK&wd=&eqid=c93af42b0005cf660000000663bbadff" target="_blank" 
                    style="text-decoration:none;color:black"> 《雷神》</a>
                  </div>
                </div>
              </div>
              
            </div>
          </div>
      
          <div class="item">
            
            <div class="zuixin-left">
              <img src="fuchouzhelianmeng2.webp" width="50px" height="690px">
              <a href="https://www.baidu.com/link?url=8BGNComXUjqD5oysf4qhAz-wrCgRV9Y__ary6EHMc6iYsMB79-XjqdPo7CM-7G1ypLeYp4N9GnT7QiA3kYHht_&wd=&eqid=e155f9990011d3130000000663bc3bc0" target="_blank"
              style="text-decoration:none;color:black">
                《复仇者联盟2：奥创纪元》</a>
            </div>
            <div class="zuixin-right">
              <div class="zuixin-right1">
                <div>
                  <img src="gangtiexia3.webp" width="50px" height="330px">
                  <a href="https://www.baidu.com/link?url=5GcQiKVrO1l8_FPG974F4jMW7L0qS-1ebHnyzAx3SwXE2sqbYg8AXH7xYoHSZmuw&wd=&eqid=c5d69a7d00000f4d0000000663bc3bef" target="_blank" 
                  style="text-decoration:none;color:black"> 《钢铁侠3》</a>
                </div>
                <div>
                  <img src="yinhehuweidui1.webp" height="320px">
                  <a href="https://www.baidu.com/link?url=nhvakUv9bGPjkjSpbC-PQ5WM1QH2KaxUF2SCwtWEdWnwVgPY3rKmUU_xxeECJGcZ-hIQrMZiwEWsEZUQMAXeyK&wd=&eqid=d6dfafff000f1fc90000000663bc3c0a" target="_blank"
                  style="text-decoration:none;color:black"
                  >《银河护卫队》</a>
                </div>
              </div>
              <div class="zuixin-right2">
                <div>
                  <img src="meiguoduizhang2.jpg" height="320px" width="50px">
                  <a href="https://www.baidu.com/link?url=NVQnyM1X--BEpNX63z5B_xnp518lUx9viiXT120PNJ-rZm7NsOYIYQA6lJGfo-PgjairDLq86JbuQb8fevxkp_&wd=&eqid=bc321255000c8e130000000663bc3c31" target="_blank"
                  style="text-decoration:none;color:black"
                  > 《美国队长2:冬日战士》</a>
                </div>
                <div>
                  <img src="leishen2.jpg" width="50px"height="310px">
                  <a href="https://www.baidu.com/link?url=9a89oIZnhVIvmrFCRKssqNwbTTQpRdeMo-62ibRr8tNKwdQuVtU4ax1-IuhPi-um7Wj6_ej8LlbBVonH3t1Lb7hGDgHFbakx5yAdsAssj-zXaNCFn7Fu2HeRVwvQLK7v&wd=&eqid=bb12e8ec000f258f0000000663bc3c4b" 
                  target="_blank" style="text-decoration:none;color:black;">
                     《雷神2：诸神世界》</a>
                </div>
              </div>
            </div>
            
          </div>
          <div class="item">
            
            <div class="zuixin-left">
              <img src="https://p9.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/1b952d9047084cf4b76793fb16e6c256?from=pc" height="690px">
              <a href="https://www.baidu.com/link?url=A_WuuYp3f1PMnxQVFkRiT7HK2vQSgQssLwfoAr9LTdi36s9F5-6aM0P6RcdiN-IF&wd=&eqid=ff8341fa0001764b0000000663bd3392" target="_blank" style="text-decoration:none;
              color:black"> 《复仇者联盟4：终局之战》</a>
            </div>
            <div class="zuixin-right">
              <div class="zuixin-right1">
                <div>
                  <img src="https://img1.baidu.com/it/u=3358947469,4017603091&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714" width="50px" height="200px">
                  <a href="https://video.weibo.com/show?fid=1034:4806407925727336" target="_blank"
                  style="text-decoration:none;
                  color:black;">《美国队长3：内战》</a>
                </div>
                <div>
                  <img src="https://img0.baidu.com/it/u=1919385218,223686773&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=741" width="50px" height="200px">
                  <a href="https://www.baidu.com/link?url=fGhHk5-ruVlFMphsPMI4u7UrD-ewrbxsViTAufc7LzR8qgB9e1uhPNX1GEIQF2wLtfnq8m3H-DE7R1kwnLd8vVZ_RDrcDDD4_vj_O2zU2aG&wd=&eqid=c0235db90000fd4a0000000663bd33d5" target="_blank"
                  style="text-decoration:none;
                  color:black;"> 《复仇者联盟3：无限战争》</a>
                </div>
                <div>
                  <img src="https://img1.baidu.com/it/u=2432536527,2980114347&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=713" width="50px" height="190px" >
                  <a href="https://www.baidu.com/link?url=ugy-eogwKHVmEQUg3FHcrVhTKq_0hy6wu7_wfw-asQlSCmqt0NHzWUdFQlnHtbNLpEvOt5Tyj19zt51O0jB9i046J2Nxrxj6g2vWeDn71DW&wd=&eqid=f550d7da0001d4880000000663bd33fd" target="_blank"
                  style="text-decoration:none;color:black;"
                  > 《蜘蛛侠：英雄远征》</a>
                </div>
              </div>
              <div class="zuixin-right2">
                <div>
                  <img src="spiderman1.jpg" width="50px" height="210px">
                  <a href="https://www.baidu.com/link?url=F6pBxG9-pIb8qspm-5BK9cpl4_IArwr64zSGn3fMbgwgqHQXVQ4tB0MYZ-Ta7V78EN4mpncW8n1jQd204tNA3c_r3T9F6QBuqveaGYpfAj7&wd=&eqid=8a848425000012f00000000663bd34f6" target="_blank"
                  style="text-decoration:none;color:black;"
                  > 《蜘蛛侠：英雄归来》</a>
                </div>
                <div>
                  <img src="https://img5.mtime.cn/sma/2017/09/14/132001.27865683.jpg" width="50px" height="210px">
                  <a href="https://www.baidu.com/link?url=3JsVDevji2hl7h_MnXoWfABN9UYKie75R24WHFv9CiC62gbBrSdvtHCe7_1ODhKg4baAVh3tkk5EfTvqjIArnN7l-tVgj5dywHhTXySYmpF369urxhjlaIjEzu1ZSbMT&wd=&eqid=c2a005ae000148ee0000000663bd343b" target="_blank"
                  style="text-decoration:none; color:black;"> 《雷神3:诸神黄昏》</a>
                </div>
                <div>
                  <img src="jingqiduizhang.jpeg" width="50px" height="200px">
                  <a href="https://www.baidu.com/link?url=Wz3xbEXbFjtIEfTSmzM1crHdz-OB4PI0yyZrCkmBOxNnt6jGZpCnTAqsqked9129&wd=&eqid=cd1e3bd700000c680000000663bd3453" target="_blank"
                  style="text-decoration:none;color:black;"
                  > 《惊奇队长》</a>
                </div>
              </div>
            </div>
          </div>
          </div>
          <script>
            let tabName=document.querySelector("#tabNav");
            let lis=tabName.querySelectorAll("li");
            let items=document.querySelectorAll(".item");
            for(let i=0;i<lis.length;i++){
                lis[i].onclick=function(){
                    lis.forEach(value=>{value.className='';});
                    lis[i].className='active';
                    items.forEach(value=>{value.className='item'});
                    items[i].className='item show';
                }
            }
          </script>
          <div style="float:right; background-color:grey" class="div1">
       <h1>漫威第四阶段(电视剧和电影)</h1>
       <h3>详细请参考下面链接</h3>
     <a href="http://www.bilibili.com/video/BV1bW4y1K7Jb" style="text-decoration:none; color:#ff8500">漫威第四阶段所有影片</a>
        <hr size="1" color="#A2A2A2">  
        <div class="newspaper">
          <h2 >电视剧：</h2>
          <div class="movie">《鹰眼》
            </div>
            <br>
            <div class="movie">《洛基》
              <br>
            </div>
            <br>
            <div class="movie">《猎鹰与冬兵》
              <br>
            </div>
            <br>
            <div class="movie">《旺达与幻视》
              <h5>电影：</h5>
        <div class="movie">
          《雷神4：爱与雷霆》
        </div>    
        <br>
        <div class="movie">
          《蜘蛛侠：英雄无归》
        </div>    
        <br>
        <div class="movie">
          《黑豹2》
        </div>    
        <br>
        <div class="movie">
          《黑寡妇》
        </div>    
        <br>
        <div class="movie">
          《永恒族》
        </div>    
        <br>
        <div class="movie">
          《月光骑士》
        </div>    
        <br>
        <div class="movie">
          《银河护卫队：圣诞特别篇》
        </div>    
        <br>
        <div class="movie">
          《女浩克》
        </div>   <br>
        <div class="movie">
          《惊奇少女》
        </div>    
        <br>
        <div class="movie">
          《旺达寻亲记》
        </div>    
        <br>
        <div class="movie">
          《尚气》
        </div>    
        <br>
        <div class="movie">
          《奇异博士2》
        </div>    
        </div>  
    </div>
          </div>
        </main>
        <body>
            <div>
                <h1 style="text-align:center ;color:#ff8500">
                    <a href="https://video.weibo.com/show?fid=1034:4856336790519917" style="text-decoration:none; color:#ff8500">
                        一起期待漫威电影宇宙第五阶段的开篇之作：《蚁人与黄蜂女：量子狂潮》
                    </a>
                </h1>
                <img src="yiren.jpg" style="padding-left:500px;padding-right:50px">
            </div>
    <div>
      <h1 style="text-align:center;color:orangered">漫威不是一人建成的</h1>
    <img src="all.jpg" width="100%">
</div>
<div>
  <h1 style="text-align:center;color:black">漫威之父：斯坦·李</h1>
  <p style="color:#FF7F50">
    <a href="sitanli.html"
    style="color:gold; text-decoration:none;"> 
    作为漫威曾经的创始人之一，斯坦李对于漫威来说功不可没，他的传奇一生有太多太多的精彩，他也曾以客串的方式出现在各种电影里。详细内容请点击
      </a>
    </p>
</div>
<div class="tupianku" >
<div class="gallery">
  <a target="_blank" >
    <img src="sitanli4.jpeg"  width="600%" height="400">
  </a>
  <div class="desc" style="color:#FF7F50"> 斯坦李客串《复仇者联盟2：奥创纪元》</div>
</div>

<div class="gallery">
  <a target="_blank" >
    <img src="sitanli1.jpeg" width="600" height="400">
  </a>
  <div class="desc" style="color:brown">斯坦李客串《黑豹》</div>
</div>

<div class="gallery">
  <a target="_blank" >
    <img src="stanli2.jpeg"  width="600" height="400">
  </a>
  <div class="desc" style="color:gold" >斯坦李客串《美国队长》</div>
</div>

<div class="gallery">
  <a target="_blank">
    <img src="sitanli3.webp"  width="600" height="400">
  </a>
  <div class="desc" style="color:khaki">斯坦李客串《蜘蛛侠》</div>
</div>
</div>
</body>
    <footer>
      <div class="footer">
			<div class="container">
				<div class="footer-liebiao">
					<div class="guanyu">
						<table>
							<tr class="hello">
								<td colspan="5"><h4>关于我们</h4></td>
							</tr>
							<tr>
								<td>关于我们</td>
								<td>联系我们</td>
								<td>在线反馈</td>
								<td>侵权投诉</td>
							
							</tr>
						</table>
					</div>
					
					<div class="xieyi">
						<table>
							<tr class="hello">
								<td><h4>协议声明</h4></td>
							</tr>
							<tr>
								<td>用户协议</td>
								<td>隐私政策</td>
								<td>历史协议版本</td>
								<td>知识产权声明</td>
							</tr>
              <tr>
              </tr>
						</table></div>
          </div>
        </footer>
        <body>
          <footer>
          <br>
          
            <div class="xuexibaogao"  >
              <a href="xuexibaogao.html" style="text-decoration:none;color:black "class="zi">
             点击这里查看我的学习报告</a>
            </div>
        
	</footer>	
  
</body>
</html>
